<!-- 页面 -->
<template>
	<view class="ss-goods-wrap">
		<!-- lg卡片：横向型，一行放一个，图片左内容右边  -->
		<view
				:style="[elStyles]"
				class="lg-goods-card ss-flex ss-col-stretch item-card"
		>
			<image @tap="onClick" :src="sheep.$url.cdn(data.productPic.split(',')[0])" class="lg-img-box" mode="aspectFill"></image>
			<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
				<view>
					<view
							@tap="onClick"
							:style="[{ color: titleColor }]"
							class="lg-goods-title ss-line-2"
					>
						{{ data.productName }}
					</view>
					<view
							:style="[{ color: subTitleColor, background: subTitleBackground }]"
							class="lg-goods-subtitle ss-m-t-10 ss-line-1"
					>
						{{ data.productId }} | {{ computeTime() }}
					</view>
				</view>
				<view>
					<view class="ss-flex ss-col-bottom ss-m-t-10">
						<view
								v-if="goodsFields.price?.show"
								:style="[{ color: goodsFields.price.color }]"
								class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
						>
							{{ data.productPrice }}
							<text class="ss-font-24">{{ priceUnit }}</text>
						</view>
					</view>
				</view>
			</view>

			<slot name="cart">
				<view class="buy-box ss-flex ss-col-center ss-row-center" @click="copyLink">
					复制链接
				</view>
			</slot
			>
		</view>
	</view>
</template>

<script setup>
/**
 * 商品卡片
 *
 * @property {Array} size = [xs | sm | md | lg | sl ]        - 列表数据
 * @property {String} tag                      - md及以上才有
 * @property {String} img                      - 图片
 * @property {String} background                  - 背景色
 * @property {String} topRadius                  - 上圆角
 * @property {String} bottomRadius                  - 下圆角
 * @property {String} title                    - 标题
 * @property {String} titleColor                  - 标题颜色
 * @property {Number} titleWidth = 0                - 标题宽度，默认0，单位rpx
 * @property {String} subTitle                    - 副标题
 * @property {String} subTitleColor                  - 副标题颜色
 * @property {String} subTitleBackground              - 副标题背景
 * @property {String | Number} price                - 价格
 * @property {String} priceColor                  - 价格颜色
 * @property {String | Number} originPrice              - 原价/划线价
 * @property {String} originPriceColor                - 原价颜色
 * @property {String | Number} sales                - 数量
 * @property {String} salesColor                  - 数量颜色
 *
 * @slots activity                          - 活动插槽
 * @slots cart                            - 清单插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
 *
 * @event {Function()} click                    - 点击卡片
 *
 */
import {computed, getCurrentInstance, reactive} from 'vue';
import sheep from '@/sheep';
import {formatSales} from '@/sheep/hooks/useGoods';

// 数据
const state = reactive({});

// 接收参数
const props = defineProps({
	goodsFields: {
		type: [Array, Object],
		default() {
			return {
				title: {show: true},
				subtitle: {show: true},
				price: {show: true},
				original_price: {show: true},
				sales: {show: true},
				stock: {show: true},
			};
		},
	},
	tagStyle: {
		type: Object,
		default: {},
	},
	data: {
		type: Object,
		default: {},
	},
	size: {
		type: String,
		default: 'sl',
	},
	background: {
		type: String,
		default: '',
	},
	topRadius: {
		type: Number,
		default: 0,
	},
	bottomRadius: {
		type: Number,
		default: 0,
	},
	titleWidth: {
		type: Number,
		default: 0,
	},
	titleColor: {
		type: String,
		default: '#333',
	},
	priceColor: {
		type: String,
		default: '',
	},
	originPriceColor: {
		type: String,
		default: '#C4C4C4',
	},
	priceUnit: {
		type: String,
		default: '日元',
	},
	subTitleColor: {
		type: String,
		default: '#999999',
	},
	subTitleBackground: {
		type: String,
		default: '',
	},
	buttonShow: {
		type: Boolean,
		default: true,
	},
	seckillTag: {
		type: Boolean,
		default: false,
	},
	grouponTag: {
		type: Boolean,
		default: false,
	},
});

// 组件样式
const elStyles = computed(() => {
	return {
		background: props.background,
		'border-top-left-radius': props.topRadius + 'px',
		'border-top-right-radius': props.topRadius + 'px',
		'border-bottom-left-radius': props.bottomRadius + 'px',
		'border-bottom-right-radius': props.bottomRadius + 'px',
	};
});

function copyLink() {
	let link = `https://jp.mercari.com/item/${props.data.productId}`;
	uni.setClipboardData({
		data: link,
		success: function () {
			uni.showToast({
				title: `复制成功【${link}】`,
				icon: 'none'
			});
		}
	});
}

function computeTime() {
	const now = Date.now(); // 获取当前时间戳（毫秒）
	const productTime = props.data.productTime * 1000; // 可能是秒级时间戳，转换为毫秒级
	const diffSeconds = Math.floor((now - productTime) / 1000); // 计算时间差（秒）

	if (diffSeconds < 60) {
		return `${diffSeconds}秒前上新`;
	}
	const diffMinutes = Math.floor(diffSeconds / 60);
	if (diffMinutes < 60) {
		return `${diffMinutes}分钟前上新`;
	}
	const diffHours = Math.floor(diffMinutes / 60);
	if (diffHours < 24) {
		return `${diffHours}小时前上新`;
	}
	const diffDays = Math.floor(diffHours / 24);
	if (diffDays < 30) {
		return `${diffDays}天前上新`;
	}
	const diffMonths = Math.floor(diffDays / 30);
	if (diffMonths < 12) {
		return `${diffMonths}个月前上新`;
	}
	const diffYears = Math.floor(diffMonths / 12);
	return `${diffYears}年前上新`;
}


function handleJump() {
	// 跳转到乐一番
	wx.navigateToMiniProgram({
		appId: 'wxdb62e4d69a36d0e5', // 替换为目标小程序 AppID
		path: `subPackages/pagesOther/goods_details/index?id=${props.data.productId}`, // 小程序路径
		envVersion: 'release', // 开发版、体验版或正式版
		success(res) {
			console.log("跳转到其他小程序成功！", res);
		},
		fail(err) {
			console.error("跳转到其他小程序失败！", err);
		}
	});
}

function onDetail() {
	sheep.$router.go('/pages/goods/index', {id: item.productId, platform: 0})
}

// 返回事件
const emits = defineEmits(['click', 'getHeight']);

const onClick = () => {
	emits('click');
};

// 获取实时卡片高度
const {proxy} = getCurrentInstance();
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;

</script>

<style lang="scss" scoped>
.tag-icon-box {
	position: absolute;
	right: 5rpx;
	bottom: 5rpx;
	z-index: 2;

	.tag-icon {
		width: 42rpx;
		height: 42rpx;
	}
}

.seckill-tag {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 68rpx;
	height: 38rpx;
	background: linear-gradient(90deg, #ff5854 0%, #ff2621 100%);
	border-radius: 10rpx 0px 10rpx 0px;
	font-size: 24rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 32rpx;
}

.groupon-tag {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 68rpx;
	height: 38rpx;
	background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
	border-radius: 10rpx 0px 10rpx 0px;
	font-size: 24rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 32rpx;
}

.goods-img {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
}

.price-unit {
	margin-right: -4px;
}

.sales-text {
	display: table;
	font-size: 24rpx;
	transform: scale(0.8);
	margin-left: 0rpx;
	color: #c4c4c4;
}

.activity-tag {
	font-size: 20rpx;
	color: #ff0000;
	line-height: 30rpx;
	padding: 0 10rpx;
	border: 1px solid rgba(#ff0000, 0.25);
	border-radius: 4px;
	flex-shrink: 0;
}

.goods-origin-price {
	font-size: 20rpx;
	color: #c4c4c4;
	line-height: 36rpx;
	text-decoration: line-through;
}

// xs
.xs-goods-card {
	overflow: hidden;
	// max-width: 375rpx;
	background-color: $white;
	position: relative;

	.xs-img-box {
		width: 128rpx;
		height: 128rpx;
		margin-right: 20rpx;
	}

	.xs-goods-title {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.xs-goods-price {
		font-size: 30rpx;
		color: $red;
	}
}

// sm
.sm-goods-card {
	overflow: hidden;
	// width: 223rpx;
	// width: 100%;
	background-color: $white;
	position: relative;

	.sm-img-box {
		// width: 228rpx;
		width: 100%;
		height: 208rpx;
	}

	.sm-goods-content {
		padding: 20rpx 16rpx;
		box-sizing: border-box;
	}

	.sm-goods-title {
		font-size: 26rpx;
		color: #333;
	}

	.sm-goods-price {
		font-size: 30rpx;
		color: $red;
	}
}

// md
.md-goods-card {
	overflow: hidden;
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: $white;
	position: relative;

	.md-img-box {
		width: 100%;
		//border: 8px solid #e16759;
	}

	.md-goods-title {
		font-size: 26rpx;
		color: #333;
		width: 100%;
	}

	.md-goods-subtitle {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.md-goods-price {
		font-size: 30rpx;
		color: $red;
		line-height: 36rpx;
	}

	.cart-box {
		width: 54rpx;
		height: 54rpx;
		background: linear-gradient(90deg, #fe8900, #ff5e00);
		border-radius: 50%;
		position: absolute;
		bottom: 50rpx;
		right: 20rpx;
		z-index: 2;

		.cart-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}
}

// lg
.lg-goods-card {
	overflow: hidden;
	position: relative;
	z-index: 1;
	background-color: $white;
	height: 280rpx;

	.lg-img-box {
		width: 250rpx;
		height: 250rpx;
		margin: 10rpx 20rpx 10rpx 10rpx;
		//border: 2px solid #F39800;
		border-radius: 10rpx;
		box-shadow: 1px 1px 5px #9a9a9a;
	}

	.lg-goods-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		line-height: 60rpx;
		// width: 410rpx;
	}

	.lg-goods-subtitle {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		// line-height: 30rpx;
		// width: 410rpx;
	}

	.lg-goods-price {
		margin-left: 30rpx;
		font-size: 40rpx;
		color: $red;
		font-weight: bold;
		line-height: 100rpx;
	}

	.buy-box {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 2;
		width: 120rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #F39800, #F39800);
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	.tag-box {
		width: 100%;
	}
}

// sl

.sl-goods-card {
	overflow: hidden;
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: $white;

	.sl-goods-content {
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}

	.sl-img-box {
		width: 100%;
		height: 360rpx;
	}

	.sl-goods-title {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.sl-goods-subtitle {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 30rpx;
	}

	.sl-goods-price {
		font-size: 30rpx;
		color: $red;
		line-height: 36rpx;
	}

	.buy-box {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 2;
		width: 148rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #fe8900, #ff5e00);
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffffff;
	}
}

.item-card {
	margin-bottom: 20rpx;
}
</style>
